<template>
  <div id="lifelinesInfo-map" style="width:100%;height:800px;"></div>
  <div id="lifelinesInfo-mapDiv" class="ol-popup">
    <!-- 显示控件 -->
    <div id="lifelinesInfo-setDivPosition" class="init-setDivPosition">
      <!-- 切换卫星和街道地图 -->
      <p @click="switchMap" class="init-setDivPosition-selected">
        <template v-if="switchMapBool == false">
          <img src="@/assets/map/image/weixing-b.png" title="切换卫星地图"><br /><span>卫星图</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/jiedao-b.png" title="切换街道地图"><br /><span>街道图</span>
        </template>
      </p>
      <!-- 返回主界面 -->
      <p @click="zoomDefaultPosition" :class="{ 'init-setDivPosition-selected': zoomDefaultPositionBool == true }">
        <img src="@/assets/map/image/newImage/home.png" title="返回主界面"><br /><span>主界面</span>
      </p>
      <!-- 显示工具箱 -->
      <p @click="showHideToolsBoxDiv" :class="{ 'init-setDivPosition-selected': showHideToolsBox == false }">
        <template v-if="showHideToolsBox">
          <img src="@/assets/map/image/tools.png" title="打开工具箱"><br /><span>工具箱</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/tools.png" title="关闭工具箱"><br /><span>工具箱</span>
        </template>
      </p>
      <!-- 上传 -->
      <p @click="showHideUploadDiv" :class="{ 'init-setDivPosition-selected': showHideUploadDivBool == false }">
        <template v-if="showHideUploadDivBool">
          <img src="@/assets/map/image/newImage/upload.png" title="打开上传面板"><br /><span>上传</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/newImage/upload.png" title="关闭上传面板"><br /><span>上传</span>
        </template>
      </p>
      <!-- 管理 -->
      <p @click="showHideManageDiv" :class="{ 'init-setDivPosition-selected': showHideManageDivBool == false }">
        <template v-if="showHideManageDivBool">
          <img src="@/assets/map/image/newImage/search.png" title="打开管理面板"><br /><span>管理</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/newImage/search.png" title="关闭管理面板"><br /><span>管理</span>
        </template>
      </p>
      <!-- 查询 -->
      <!--<p @click="showHideQueryDiv" :class="{ 'init-setDivPosition-selected': showHideQueryDivBool == false }">
        <template v-if="showHideQueryDivBool">
          <img src="@/assets/map/image/newImage/search.png" title="打开查询面板"><br /><span style="border:0;">查询</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/newImage/search.png" title="关闭查询面板"><br /><span style="border:0;">查询</span>
        </template>
      </p>-->
    </div>
    <!-- 工具箱 -->
    <div id="lifelinesInfo-ToolsBoxDiv" class="init-ToolsBoxDiv">
      <p @click="measureToolBox" :class="{ 'init-setDivPosition-selected': showHideMeasureTool == false }">
        <template v-if="showHideMeasureTool">
          <img title="开启测量工具" src="@/assets/map/image/cel.png"><br /><span>测量</span>
        </template>
        <template v-else>
          <img title="关闭测量工具" src="@/assets/map/image/cel.png"><br /><span>测量</span>
        </template>
      </p>
      <p @click="positionToolBox" :class="{ 'init-setDivPosition-selected': showHidePositionTool == false }">
        <template v-if="showHidePositionTool">
          <img title="开启定位工具" src="@/assets/map/image/dingw.png"><br /><span style="border:0;">定位</span>
        </template>
        <template v-else>
          <img title="关闭定位工具" src="@/assets/map/image/dingw.png"><br /><span style="border:0;">定位</span>
        </template>
      </p>
    </div>
    <!-- 所有工具 -->
    <div id="lifelinesInfo-AllToolsDiv" class="init-AllToolsDiv">
      <!-- 测量工具 -->
      <div id="lifelinesInfo-MeasureToolsDiv" class="init-AllToolsDivFloat">
        <p @click="measureDistance" :class="{ 'init-setDivPosition-selected': measureDistanceBool == false }">
          <template v-if="measureDistanceBool">
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br /><span>测量距离</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br /><span>测量距离</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="measureArea" :class="{ 'init-setDivPosition-selected': measureAreaBool == false }">
          <template v-if="measureAreaBool">
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br /><span>测量面积</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br /><span>测量面积</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="stopMeasure" :class="{ 'init-setDivPosition-selected': stopMeasureBool == false }">
          <template v-if="stopMeasureBool">
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br /><span>结束测量</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br /><span>结束测量</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="clearMeasure" :class="{ 'init-setDivPosition-selected': clearMeasureBool == false }">
          <template v-if="clearMeasureBool">
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br /><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br /><span>清空结果</span>
          </template>
        </p>
      </div>
      <!-- 定位工具 -->
      <div id="lifelinesInfo-MousePositionDiv">
        <span><img class="init-jingd" src="@/assets/map/image/jingd.png" title="鼠标左键在地图上点击位置的经度值"></span>
        <input id="lifelinesInfo-MousePositionLon" type="text" value="">
        <span><img class="init-weid" src="@/assets/map/image/weid.png" title="鼠标左键在地图上点击位置的纬度值"></span>
        <input id="lifelinesInfo-MousePositionLat" type="text" value="">
        <p @click="clearPosition" :class="{ 'init-setDivPosition-selected': clearPositionBool == false }">
          <template v-if="clearPositionBool">
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br /><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br /><span>清空结果</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="addPosition" :class="{ 'init-setDivPosition-selected': addPositionBool == false }">
          <template v-if="addPositionBool">
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br /><span>添加定位点</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br /><span>添加定位点</span>
          </template>
        </p>
      </div>
    </div>
    <!-- 弹出窗口 -->
    <!--<div id="lifelinesInfo-popup" class="new-ol-popup">
      <a href="#" id="lifelinesInfo-popup-closer" class="new-ol-popup-closer"></a>
      <div id="lifelinesInfo-popup-content"></div>
    </div>-->
  </div>
</template>
<script>
import '@/assets/map/ol/ol.css';
import { getProjection, getResolutions, getTiandituVecMap, getTiandituVecText, getTiandituImgMap, getTiandituImgText } from "@/map/projMap.js";
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import { Vector as VectorSource } from 'ol/source'
import { Control } from 'ol/control';
import Overlay from 'ol/Overlay';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Polygon from 'ol/geom/Polygon';
import LineString from 'ol/geom/LineString';
import { Fill, Stroke, Style, Icon, Circle } from 'ol/style';
import { Select, Draw, Modify, Snap, Translate } from 'ol/interaction';
import { getArea, getLength } from 'ol/sphere';
import { unByKey } from 'ol/Observable';
import { boundingExtent } from 'ol/extent';
import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';

export default {
  name: "LifelinesInfoMap",
  components: {

  },
  props: {
    showHideDivType: {//显示上传|查询面板
      type: String,
      required: true,
      default: true
    },
  },
  emits: ["showHideUploadDiv", "showHideManageDiv", "showHideQueryDiv", "showDetailId", "getMap"],
  data() {
    return {
      str: "lifelinesInfo",
      map: null,
      projection4490: null,
      center: [105, 34],
      zoom: 3,
      mapLoadingBool: false,//是否正在查询参数
      zoomDefaultPositionBool: true,//显示主界面
      switchMapBool: false,//切换地图
      layer1: null,//天地图街道图
      layer2: null,
      layer3: null,//天地图卫星图
      layer4: null,
      draw: null,//矢量绘制
      snap: null,
      select: null,
      modify: null,
      drag: null,
      source: null,//矢量绘制图层数据
      measureSource: null,//测量结果图层数据
      measure: null,//测量工具
      sketch: null,
      helpTooltipElement: null,
      helpTooltip: null,
      measureTooltipElement: null,
      measureTooltip: null,
      measureTooltipArray: [],//全部测量结果Overlay数组
      showHideMeasureTool: true,//显示|隐藏测量工具
      measureDistanceBool: true,
      measureAreaBool: true,
      stopMeasureBool: true,
      clearMeasureBool: true,
      showHidePositionTool: true,//显示|隐藏定位工具
      addPositionBool: true,
      clearPositionBool: true,
      popupInfoLayer: null,//弹出窗口
      showHideToolsBox: true,
      //addressMatchService:null,//地址匹配
      addressUrl: "https://iserver.supermap.io/iserver/services/addressmatch-Address/restjsr/v1/address",
      selectFeature: null,//选中要素
      showHideUploadDivBool: true,//显示|隐藏上传面板
      showHideManageDivBool: true,//显示|隐藏管理面板
      showHideQueryDivBool: true,//显示|隐藏查询面板
      queryMapDrawBool: false,//是否开启地图圈选
    }
  },
  watch: {
    showHideDivType: {
      handler: function (newVal, oldVal) {
        if (newVal != oldVal) {
          if (newVal === "") {//都不显示
            this.showHideUploadDivBool = true;//隐藏上传面板
            this.showHideManageDivBool = true;//隐藏管理面板
            this.showHideQueryDivBool = true;//隐藏查询面板
          } else if (newVal == "showUploadDiv") {
            this.showHideUploadDivBool = false;//显示上传面板
            this.showHideManageDivBool = true;//隐藏管理面板
            this.showHideQueryDivBool = true;//隐藏查询面板
          } else if (newVal == "showManageDiv") {
            this.showHideUploadDivBool = true;//隐藏上传面板
            this.showHideManageDivBool = false;//显示管理面板
            this.showHideQueryDivBool = true;//隐藏查询面板
          } else if (newVal == "showQueryDiv") {
            this.showHideUploadDivBool = true;//隐藏上传面板
            this.showHideManageDivBool = true;//隐藏管理面板
            this.showHideQueryDivBool = false;//显示查询面板
          }
        }
      },
      immediate: true
    },
  },
  created() {

  },
  mounted() {
    let that = this;
    //地图异步加载
    this.$nextTick(function () {
      //地图异步加载
      setTimeout(() => {
        //初始化地图信息
        that.initMap();
      }, 200);
    });
  },
  // beforeCreate() {//生命周期创建之前
  //   console.log("beforeCreate");
  // },
  // beforeMount() {//生命周期挂载之前
  //   console.log("beforeMount");
  // },
  // beforeUpdate() {//生命周期更新之前
  //   console.log("beforeUpdate");
  // },
  // updated() {//生命周期更新之后
  //   console.log("updated");
  // },
  // beforeDestroy() {//生命周期销毁之前
  //   console.log("beforeDestroy");
  // },
  destroyed() {//生命周期销毁完成
    this.map = null;
  },
  activated() {//如果页面有keep-alive缓存功能激活，这个函数会触发
    //自动获取地图div高度
    this.autodivheight();
    //浏览器窗口发生变化时同时变化DIV高度
    window.onresize = this.autodivheight;
  },
  deactivated() {//如果页面有keep-alive缓存功能停用，这个函数会触发
    //取消浏览器窗口发生变化时同时变化DIV高度事件
    window.onresize = null;
  },
  methods: {
    initMap() {
      let that = this;
      let mapStr = this.str;
      let targetMap = document.getElementById(mapStr + "-map");
      if (targetMap.innerHTML != "") {
        console.log("清空targetMap");
      }
      targetMap.innerHTML = "";//清空
      //新建popup弹窗
      let targetDiv = document.getElementById(mapStr + "-mapDiv");
      let node = document.createElement("div");
      node.id = mapStr + "-popup";
      node.setAttribute("class", "new-ol-popup");
      node.innerHTML = '<a href="#" id="' + mapStr + '-popup-closer" class="new-ol-popup-closer"></a>' +
        '<div id="' + mapStr + '-popup-content"></div>';
      targetDiv.appendChild(node);
      //自动获取地图div高度
      this.autodivheight();
      //浏览器窗口发生变化时同时变化DIV高度
      window.onresize = this.autodivheight;
      if (this.map) {//避免重复加载地图
        return;
      }
      //获取投影4490坐标系
      this.projection4490 = getProjection();
      //初始化地图信息
      this.map = new Map({
        target: targetMap.id,
        /*controls: defaultControls({attributionOptions: {collapsed: false}})
            .extend([new Logo()]),*/
        view: new View({
          center: this.center,
          maxZoom: 17,
          minZoom: 0,
          zoom: this.zoom,
          constrainResolution: true,//缩放地图可移动到最近的缩放级别（整数zoom级别）
          projection: 'EPSG:4490',
          resolutions: getResolutions()
        })
      });
      //添加天地图图层
      this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
      this.map.addLayer(this.layer1);
      this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
      this.map.addLayer(this.layer2);
      this.layer1.setZIndex(0);
      this.layer2.setZIndex(0);
      //矢量绘制图层
      this.source = new VectorSource({
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: that.source,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(vectorLayer);
      vectorLayer.setZIndex(1);
      //测量结果图层
      this.measureSource = new VectorSource({
        wrapX: false
      });
      let measureLayer = new VectorLayer({
        source: that.measureSource,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(measureLayer);
      measureLayer.setZIndex(1);

      //添加控件
      let info = new Control({ element: document.getElementById(mapStr + '-mapDiv') });
      info.setMap(this.map);
      this.map.addControl(info);
      //添加控件--index页面div
      let info1 = new Control({ element: document.getElementById(mapStr + 'MapDiv') });
      info1.setMap(this.map);
      this.map.addControl(info1);
      //弹出窗口
      let popupTarget = document.getElementById(this.str + "-popup");
      if (popupTarget) {
        this.popupInfoLayer = new Overlay({
          element: popupTarget,
          positioning: 'center-center'
        });
        this.map.addOverlay(this.popupInfoLayer);
        //显示弹出窗口
        document.getElementById(this.str + "-popup").style.display = "block";
        //关闭弹出事件
        document.getElementById(this.str + "-popup-closer").onclick = function () {
          that.popupInfoLayer.setPosition(undefined);
          //隐藏弹出窗口
          document.getElementById(that.str + "-popup").style.display = "none";
        };
      }
      //右键菜单事件
      this.map.on('contextmenu', function (event) {
        event.preventDefault();//屏蔽自带的右键事件
        let pixel = that.map.getEventPixel(event.originalEvent);
        let feature = that.map.forEachFeatureAtPixel(pixel, function (feature) {
          //根据像素坐标获取右键选中的地图要素
          return feature;
        });
        if (feature && that.draw == null) {

        }
      });
      //点击地图事件
      this.map.on('click', function (event) {
        //隐藏右键菜单
        that.hideContextMenu();
        //隐藏弹出窗口
        if (that.popupInfoLayer != null) {
          that.popupInfoLayer.setPosition(undefined);
        }
        let pixel = that.map.getEventPixel(event.originalEvent);
        let coordinate = that.map.getEventCoordinate(event.originalEvent);
        //判断定位工具是否开启状态
        if (that.showHidePositionTool == false) {
          document.getElementById(mapStr + "-MousePositionLon").value = coordinate[0];
          document.getElementById(mapStr + "-MousePositionLat").value = coordinate[1];
        }
        let feature = that.map.forEachFeatureAtPixel(pixel, function (feature) {
          //根据像素坐标获取右键选中的地图要素
          return feature;
        });
        if (feature && that.draw == null) {
          //选中要素
          that.selectFeature = feature;
        }
      });
      //地图移动事件
      this.map.on('moveend', function (event) {
        let center = that.map.getView().getCenter();
        let zoom = that.map.getView().getZoom();
        if (center[0] != that.center[0] || center[1] != that.center[1] || zoom != that.zoom) {
          //设置主界面图标文字
          that.zoomDefaultPositionBool = false;
        } else {//主界面
          //设置主界面图标文字
          that.zoomDefaultPositionBool = true;
        }
        // var resolution = that.map.getView().getResolution();
      });
      //鼠标移动事件--测量工具
      this.map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return;
        }
        if (that.measure != null) {
          let helpMsg = '点击开始绘制';

          if (that.sketch) {
            const geom = that.sketch.getGeometry();
            if (geom instanceof Polygon) {
              helpMsg = '点击继续绘制多边形';
            } else if (geom instanceof LineString) {
              helpMsg = '点击继续绘制折线';
            }
          }

          that.helpTooltipElement.innerHTML = helpMsg;
          that.helpTooltip.setPosition(evt.coordinate);

          that.helpTooltipElement.classList.remove('hidden');
        }
      });
      //鼠标移出事件--测量工具
      this.map.getViewport().addEventListener('mouseout', function () {
        if (that.measure != null) {
          that.helpTooltipElement.classList.add('hidden');
        }
      });
      /*//监听分辨率变化
      this.map.getView().on('change:resolution', function(){
        var zoom = that.map.getView().getZoom();
        var resolution = that.map.getView().getResolution();
      });*/
      //地址匹配
      //this.addressMatchService = new AddressMatchService(this.addressUrl);
      //地图缩放到权限位置
      this.zoomDefaultPosition();

      //地图对象传递
      this.$emit("getMap", this.map);
    },
    autodivheight() {//自动获取div高度
      //获取浏览器窗口高度
      let winHeight = 0;
      if (window.innerHeight) {
        winHeight = window.innerHeight;
      } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
      }
      //通过深入Document内部对body进行检测，获取浏览器窗口高度
      if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
      }
      //全屏时窗口高度:864px,地图div高度:754px
      let tempHeight = 864;
      let mapTempHeight = 754;
      let mapHeight = winHeight - tempHeight + mapTempHeight;
      //最小高度
      if (mapHeight < 600) {
        mapHeight = 600;
      }
      //设置地图高度
      document.getElementById(this.str + "-map").style.height = mapHeight + "px";
      //resize事件--刷新地图,确保地图不变形
      if (this.map) {
        this.map.updateSize();
      }
    },
    getTextFormat(str) {//格式化文本内容
      if (str == null || str == undefined) {
        str = "";
      }
      return str;
    },
    hideContextMenu() {//隐藏右键菜单
      //隐藏右键菜单

    },
    //切换地图
    switchMap() {
      if (this.switchMapBool) {//显示街道图
        this.switchMapBool = false;
        //添加天地图图层
        if (this.layer1 == null) {
          this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
          this.map.addLayer(this.layer1);
        }
        if (this.layer2 == null) {
          this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
          this.map.addLayer(this.layer2);
        }
        //显示街道图
        this.layer1.setVisible(true);
        this.layer2.setVisible(true);
        this.layer3.setVisible(false);
        this.layer4.setVisible(false);
        this.layer1.setZIndex(0);
        this.layer2.setZIndex(0);
      } else {//显示卫星图
        this.switchMapBool = true;
        if (this.layer3 == null) {
          this.layer3 = getTiandituImgMap();//fxpc天地图卫星影像底图
          this.map.addLayer(this.layer3);
        }
        if (this.layer4 == null) {
          this.layer4 = getTiandituImgText();//fxpc天地图卫星影像注记
          this.map.addLayer(this.layer4);
        }
        //显示卫星图
        this.layer1.setVisible(false);
        this.layer2.setVisible(false);
        this.layer3.setVisible(true);
        this.layer4.setVisible(true);
        this.layer3.setZIndex(0);
        this.layer4.setZIndex(0);
      }
    },
    //地图缩放到权限位置
    zoomDefaultPosition() {
      //刷新地图,确保地图不变形
      this.map.updateSize();
      this.map.getView().setCenter(this.center);
      this.map.getView().setZoom(this.zoom);
      this.zoomDefaultPositionBool = true;
    },
    //显示工具箱
    showHideToolsBoxDiv() {
      if (this.showHideToolsBox) {
        this.showHideToolsBox = false;
        document.getElementById(this.str + "-ToolsBoxDiv").style.display = "block";
      } else {
        this.showHideToolsBox = true;
        document.getElementById(this.str + "-ToolsBoxDiv").style.display = "none";
      }
      //关闭全部工具
      this.closeAllToolsBox(null);
    },
    //关闭全部工具
    closeAllToolsBox(type) {
      //关闭测量工具
      if (type != "MeasureTool" && this.showHideMeasureTool == false) {
        this.showHideMeasureTool = true;
        let divId = this.str + "-MeasureToolsDiv";
        //隐藏
        document.getElementById(divId).style.display = "none";
        //清空测量结果
        this.clearMeasure();
        this.clearMeasureBool = true;
      }
      //关闭定位工具
      if (type != "PositionTool" && this.showHidePositionTool == false) {
        this.showHidePositionTool = true;
        let divId = this.str + "-MousePositionDiv";
        //隐藏
        document.getElementById(divId).style.display = "none";
        //清空定位结果
        this.clearPosition();
      }
    },
    measureToolBox() {//测量工具Div
      let divId = this.str + "-MeasureToolsDiv";
      //关闭全部工具
      this.closeAllToolsBox("MeasureTool");
      if (this.showHideMeasureTool) {
        this.showHideMeasureTool = false;
        //显示
        document.getElementById(divId).style.display = "block";
      } else {
        this.showHideMeasureTool = true;
        //隐藏
        document.getElementById(divId).style.display = "none";
      }
    },
    measureDistance() {//测距
      if (this.source != null) {
        //地图工具箱--开启测距
        this.setMapToolBox('MeasureDistance');
        //设置样式
        this.measureDistanceBool = false;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    measureArea() {//测面
      if (this.source != null) {
        //地图工具箱--开启测面
        this.setMapToolBox('MeasureArea');
        //设置样式
        this.measureAreaBool = false;
        this.measureDistanceBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    stopMeasure() {//停止测量
      if (this.source != null) {
        //地图工具箱--停止测量
        this.setMapToolBox('StopMeasure');
        //设置样式
        this.stopMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.clearMeasureBool = true;
      }
    },
    clearMeasure() {//清空测量结果
      if (this.source != null) {
        //地图工具箱--清空测量结果
        this.setMapToolBox('ClearMeasure');
        //设置样式
        this.clearMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
      }
    },
    positionToolBox() {//定位工具Div
      let divId = this.str + "-MousePositionDiv";
      //关闭全部工具
      this.closeAllToolsBox("PositionTool");
      if (this.showHidePositionTool) {
        this.showHidePositionTool = false;
        //显示
        document.getElementById(divId).style.display = "block";
      } else {
        this.showHidePositionTool = true;
        //隐藏
        document.getElementById(divId).style.display = "none";
      }
    },
    addPosition() {//添加定位结果
      this.clearPositionBool = true;
      this.addPositionBool = false;
      //添加定位结果
      if (this.source != null) {
        let longitude = document.getElementById(this.str + "-MousePositionLon").value;
        let latitude = document.getElementById(this.str + "-MousePositionLat").value;
        //处理经纬度
        let lonlat = this.getLonLat(longitude, latitude);
        if (lonlat != null) {
          //点
          let featureTmp = new Feature({
            geometry: new Point(lonlat)
          });
          //样式
          let style = this.getPointStyle();
          featureTmp.setStyle(style);
          //设置属性
          featureTmp.setProperties({
            type: "position",
            longitude: longitude,
            latitude: latitude,
          });
          //添加定位点
          this.source.addFeature(featureTmp);
          //居中缩放
          this.map.getView().setCenter(lonlat);
          this.map.getView().setZoom(17);
        }
      }
    },
    clearPosition() {//清空定位结果
      this.clearPositionBool = false;
      this.addPositionBool = true;
      document.getElementById(this.str+"-MousePositionLon").value = "";
      document.getElementById(this.str+"-MousePositionLat").value = "";
      //地图工具箱--清空
      this.setMapToolBox("Clear");
    },
    //地图工具箱
    setMapToolBox(value) {
      let that = this;
      if (value === 'Clear') {//清空
        //清空
        that.source.clear();
        //停止绘制|修改|拖拽|选择
        clearInteraction();
      } else if (value === 'Point' || value === 'LineString' || value === 'Polygon' || value === 'Circle') {//开启绘制
        //点|线|面|圆绘制
        //开启绘制
        startDrawInteraction(value, false);
      } else if (value === 'FreeHandLineString' || value === 'FreeHandPolygon') {//开启绘制
        //手绘线|手绘面
        value = value.split("FreeHand")[1];
        //开启绘制
        startDrawInteraction(value, true);
      } else if (value === 'StopDraw') {//停止绘制
        //停止绘制
        stopDrawInteraction();
      } else if (value === 'Snap') {//开启捕捉
        //开启捕捉
        startSnapInteraction();
      } else if (value === 'NotSnap') {//停止捕捉
        //停止捕捉
        stopSnapInteraction();
      } else if (value === 'Modify') {//开启修改
        //开启修改
        startModifyInteraction();
      } else if (value === 'NotModify') {//停止修改
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
      } else if (value === 'Drag') {//开启拖拽
        //开启拖拽
        startDragInteraction();
      } else if (value === 'NotDrag') {//停止拖拽
        //停止拖拽
        stopDragInteraction();
      } else if (value === 'Select') {//开启选择
        //开启选择
        startSelectInteraction();
      } else if (value === 'NotSelect') {//停止选择
        //停止选择
        stopSelectInteraction();
      } else if (value === 'MeasureDistance') {//开启测距
        //开启测距
        startMeasureInteraction('LineString');
      } else if (value === 'MeasureArea') {//开启测面
        //开启测面
        startMeasureInteraction('Polygon');
      } else if (value === 'StopMeasure') {//停止测量（测距|测面）
        //停止测量
        stopMeasureInteraction();
      } else if (value === 'ClearMeasure') {//清空测量结果
        //停止测量
        stopMeasureInteraction();
        //清空测量结果
        clearMeasureResult();
      }

      //停止绘制|修改|拖拽|选择
      function clearInteraction() {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
      }

      //停止捕捉
      function stopSnapInteraction() {
        if (that.snap) {
          that.map.removeInteraction(that.snap);
          that.snap = null;
        }
      }

      //开启捕捉
      function startSnapInteraction() {
        //停止捕捉
        stopSnapInteraction();
        //开启捕捉
        that.snap = new Snap({
          source: that.source
        });
        that.map.addInteraction(that.snap);
      }

      //停止拖拽
      function stopDragInteraction() {
        //停止拖拽
        if (that.drag) {
          that.map.removeInteraction(that.drag);
          that.drag = null;
        }
      }

      //开启拖拽
      function startDragInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止修改
        stopModifyInteraction();
        //开启选择
        startSelectInteraction();
        //停止拖拽
        stopDragInteraction();
        //开启拖拽
        that.drag = new Translate({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.drag);
      }

      //停止修改
      function stopModifyInteraction() {
        //停止修改
        if (that.modify) {
          that.map.removeInteraction(that.modify);
          that.modify = null;
        }
      }

      //开启修改
      function startModifyInteraction() {
        //停止绘制
        stopDrawInteraction();
        //开启选择
        startSelectInteraction();
        //停止修改
        stopModifyInteraction();
        //开启修改
        that.modify = new Modify({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.modify);
      }

      //停止选择
      function stopSelectInteraction() {
        //停止选择
        if (that.select) {
          that.map.removeInteraction(that.select);
          that.select = null;
        }
      }

      //开启选择
      function startSelectInteraction() {
        //停止选择
        stopSelectInteraction();
        //开启选择
        that.select = new Select({
          wrapX: false
        });
        that.map.addInteraction(that.select);
      }

      //停止绘制
      function stopDrawInteraction() {
        //停止绘制
        if (that.draw) {
          that.map.removeInteraction(that.draw);
          that.draw = null;
        }
      }

      //开启绘制
      function startDrawInteraction(type, bool) {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
        if (bool) {//手绘线|手绘面
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20,
            freehand: true
          });
          that.map.addInteraction(that.draw);
        } else {//点|线|面|圆绘制
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20
          });
          that.map.addInteraction(that.draw);
        }
      }

      //计算面积
      function getPolygonArea(polygon) {
        // 这里一定要给坐标，和地图坐标保持一致，否则面积不准
        const area = getArea(polygon, { projection: 'EPSG:4490' })
        let output = Math.round((area / 1000000) * 100) / 100;//平方公里
        return output;
      }

      ////////////////////////////////////////////////////////////////////测量工具箱
      //格式化距离
      function formatLength(line) {
        const length = getLength(line, { projection: 'EPSG:4490' });
        let output;
        if (length > 100) {
          output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
        } else {
          output = Math.round(length * 100) / 100 + ' ' + 'm';
        }
        return output;
      }

      //格式化面积
      function formatArea(polygon) {
        const area = getArea(polygon, { projection: 'EPSG:4490' });
        let output;
        if (area > 10000) {
          output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
        } else {
          output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
        }
        return output;
      }

      //创建新的提示tip
      function createHelpTooltip() {
        if (that.helpTooltipElement != null) {
          that.helpTooltipElement.parentNode.removeChild(that.helpTooltipElement);
        }
        that.helpTooltipElement = document.createElement('div');
        that.helpTooltipElement.className = 'ol-tooltip hidden';
        that.helpTooltip = new Overlay({
          element: that.helpTooltipElement,
          offset: [15, 0],
          positioning: 'center-left',
        });
        that.map.addOverlay(that.helpTooltip);
      }

      //创建新的测量提示
      function createMeasureTooltip() {
        if (that.measureTooltipElement != null) {
          that.measureTooltipElement.parentNode.removeChild(that.measureTooltipElement);
        }
        that.measureTooltipElement = document.createElement('div');
        that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
        that.measureTooltip = new Overlay({
          element: that.measureTooltipElement,
          offset: [0, -15],
          positioning: 'bottom-center',
          stopEvent: false,
          insertFirst: false,
        });
        that.map.addOverlay(that.measureTooltip);
      }

      //开启测量工具
      function startMeasureInteraction(type) {
        //停止测量工具
        stopMeasureInteraction();

        //开启测量工具--绘制
        that.measure = new Draw({
          source: that.measureSource,
          type: type,
          style: new Style({
            fill: new Fill({ color: 'rgba(255, 255, 255, 0.2)' }),
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.5)',
              lineDash: [10, 10],
              width: 2,
            }),
            image: new Circle({
              radius: 5,
              stroke: new Stroke({ color: 'rgba(0, 0, 0, 0.7)' }),
              fill: new Fill({ color: 'rgba(255, 255, 255, 0.2)' }),
            }),
          }),
        });
        that.map.addInteraction(that.measure);

        //创建新的测量提示
        createMeasureTooltip();
        //创建新的提示tip
        createHelpTooltip();

        let listener;
        that.measure.on('drawstart', function (evt) {
          //设置sketch
          that.sketch = evt.feature;

          let tooltipCoord = evt.coordinate;

          listener = that.sketch.getGeometry().on('change', function (evt) {
            const geom = evt.target;
            let output;
            if (geom instanceof Polygon) {
              output = formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            that.measureTooltipElement.innerHTML = output;
            that.measureTooltip.setPosition(tooltipCoord);
          });
        });
        //完成测量绘制
        that.measure.on('drawend', function () {
          that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
          that.measureTooltip.setOffset([0, -7]);
          //添加到数组
          that.measureTooltipArray.push(that.helpTooltip);
          //添加到数组
          that.measureTooltipArray.push(that.measureTooltip);
          //清空sketch
          that.sketch = null;
          //清空tooltip
          that.measureTooltipElement = null;
          createMeasureTooltip();
          unByKey(listener);
        });
      }
      //停止测量工具
      function stopMeasureInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止测量工具
        if (that.measure) {
          that.map.removeInteraction(that.measure);
          that.measure = null;
          //隐藏提示tip
          that.helpTooltipElement.classList.add('hidden');
          //移除测量提示
          if (that.helpTooltip != null) {
            that.map.removeOverlay(that.helpTooltip);
          }
          if (that.measureTooltip != null) {
            that.map.removeOverlay(that.measureTooltip);
          }
        }
      }
      //清空测量结果
      function clearMeasureResult() {
        if (that.measureSource != null) {
          //清空测量结果
          that.measureSource.clear();
          //清空测量结果提示数组
          if (that.measureTooltipArray.length > 0) {
            for (let i = 0; i < that.measureTooltipArray.length; i++) {
              that.map.removeOverlay(that.measureTooltipArray[i]);
            }
            that.measureTooltipArray = [];
          }
        }
      }
    },
    getPolyonStyle(color, backgroundColor, strokeWidth) {//多边形样式
      if (backgroundColor == null) {
        backgroundColor = "rgba(0,0,0,0)";
      }
      let style = new Style({
        fill: new Fill({//填充样式
          color: backgroundColor
        }),
        stroke: new Stroke({//描绘
          width: strokeWidth,//宽
          color: color
        })
      });
      return style;
    },
    getPointStyle() {//点图标样式
      let img = dingweiImg;
      let style = new Style({
        image: new Icon({
          src: img,
          offset: [0, -14],
          offsetOrigin: 'bottom-right',//偏移的起点
          size: [28, 45]
        }),
      });
      return style;
    },
    //处理经纬度
    getLonLat(longitude, latitude) {
      let lonlat = null;
      if (longitude != null && latitude != null && longitude != "" && latitude != "") {
        let lon = Number(longitude);
        let lat = Number(latitude);
        if (lon > 0 && lon < 180 && lat > 0 && lat < 90) {
          lonlat = [lon, lat];
        }
      }
      return lonlat;
    },
    //获取图例数组
    getLegendArrayByData(legendSelectData) {
      //图例设置样式
      let legendArray = [];
      if (legendSelectData != null && legendSelectData.length > 0) {
        for (let i = 0; i < legendSelectData.length; i++) {
          let legendName = legendSelectData[i].name;
          let legendColor = legendSelectData[i].color;
          if (legendName.indexOf("以上") == -1) {
            let legendArr = legendName.split("-");
            let minLegend = Number(legendArr[0]);
            let maxLegend = Number(legendArr[1]);
            legendArray.push([minLegend, maxLegend, legendColor]);
          } else {
            let minLegend = Number(legendName.split("以上")[0]);
            let maxLegend = null;
            legendArray.push([minLegend, maxLegend, legendColor]);
          }
        }
      }
      return legendArray;
    },
    //根据值和图例样式数组获取颜色
    getColorByLegendArray(legendArray, value) {
      let color = "orange";
      for (let i = 0; i < legendArray.length; i++) {
        let min = legendArray[i][0];
        let max = legendArray[i][1];
        if (value >= min) {
          if (max != null) {
            if (value <= max) {
              color = legendArray[i][2];
              break;
            }
          } else {
            color = legendArray[i][2];
            break;
          }
        }
      }
      return color;
    },
    showBoundingExtent(coordinates) {//缩放到区域位置
      if (this.map != null && coordinates != null && coordinates.length > 1) {
        let extent = boundingExtent(coordinates);
        //this.map.getView().fit(extent, {duration: 1000, padding: [50, 50, 50, 50]});
        this.map.getView().fit(extent, { padding: [50, 50, 50, 50] });
        //获取默认位置
        //this.center = this.map.getView().getCenter();
        //this.zoom = this.map.getView().getZoom();
      }
    },
    //显示|隐藏上传面板
    showHideUploadDiv() {
      this.$emit("showHideUploadDiv", this.showHideUploadDivBool);
      if (this.showHideUploadDivBool) {
        this.showHideUploadDivBool = false;
        this.showHideQueryDivBool = true;//隐藏查询面板
        this.showHideManageDivBool = true;//隐藏管理面板
      } else {
        this.showHideUploadDivBool = true;
      }
    },
    //显示|隐藏管理面板
    showHideManageDiv() {
      this.$emit("showHideManageDiv", this.showHideManageDivBool);
      if (this.showHideManageDivBool) {
        this.showHideManageDivBool = false;
        this.showHideUploadDivBool = true;//隐藏上传面板
        this.showHideQueryDivBool = true;//隐藏查询面板
      } else {
        this.showHideManageDivBool = true;
      }
    },
    //显示|隐藏查询面板
    showHideQueryDiv() {
      this.$emit("showHideQueryDiv", this.showHideQueryDivBool);
      if (this.showHideQueryDivBool) {
        this.showHideQueryDivBool = false;
        this.showHideUploadDivBool = true;//隐藏上传面板
        this.showHideManageDivBool = true;//隐藏管理面板
      } else {
        this.showHideQueryDivBool = true;
      }
    },
    //根据ID显示查询详情修改面板
    showDetailId(id, dataType) {
      let array = [id, dataType];
      this.$emit("showDetailId", array);
    },
    //是否开启地图圈选查询
    queryMapEvent() {
      if (this.map != null) {
        if (this.queryMapDrawBool == true) {
          //地图工具箱--开启多边形绘制
          this.setMapToolBox("Polygon");
        } else {
          //地图工具箱--清空
          this.setMapToolBox("Clear");
        }
      }
    },
  }
}

</script>

<style scoped>
.init-setDivPosition{
  top: 0;
  left: 0
}
:deep(.new-layerLegendDiv) {
  top: 0!important;
  right: 0!important;
}
</style>